<script type="text/html" template lay-done="layui.data.indexmissionTabledone(d);">
    <div class="layui-fluid query-criteria">
        <div class="layui-form" lay-filter="query-criteria-filter" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">任务名称：</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="taskname" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">任务状态：</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="state" id="criteria-state-select"></select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">任务开始时间：</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="starttime" autocomplete="off" class="layui-input layui-input-startDate">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">任务结束时间：</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="endtime" autocomplete="off" class="layui-input layui-input-endDate">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm layui-btn-query" lay-submit lay-filter="formQuery">查询</button>
                    <button type="reset" class="layui-btn layui-btn-sm K-btn layui-btn-reset" data-target="reset"><i class="layui-icon layui-icon-refresh" style="vertical-align: middle;margin-right: 8px;"></i>清空</button>
                </div>
            </div>
        </div>
        <div id="criteria-table" lay-filter="criteria-table-filter"></div>
    </div>
</script>
<style>
    .query-criteria .layui-form-label{
        width: auto;
    }
    .query-criteria .layui-btn-query, .query-criteria .layui-btn-reset{
        width: 71px;
        background-color: #77AF6F;
    }
    .query-criteria .layui-btn-query{
        text-align: right;
        background: url('../../dist/style/res/formFill/search.png') no-repeat 10px center #77AF6F;
    }
    .query-criteria .layui-form-label{
        padding: 9px 10px;
    }
    .query-criteria .layui-inline{
        margin-right: 5px;
    }
</style>

<script>
layui.data.indexmissionTabledone = function(d){
    layui.use(['admin', 'form', 'element', 'table', 'laydate'], function(){
        var admin = layui.admin,
            form = layui.form,
            element = layui.element,
            table = layui.table,
            laydate = layui.laydate,
            index = d.params.layerIndex;
        
        form.render(null, 'query-criteria-filter');
        
        initState();
        initLaydate();
        initCriTable();

        //加载查询条件表格
        function initCriTable(taskname, state, starttime, endtime){
            var taskname = taskname ? taskname : '',
                state = state ? state : '',
                starttime = starttime ? starttime : '',
                endtime = endtime ? endtime : '';
            table.render({
                elem: '#criteria-table',
                url: 'myapi/DC/api/rest/web/custom/BacklogHome',
                method: 'post',
                where: {
                    access_token: layui.data('layuiAdmin').access_token,
                    taskname: taskname,
                    state: state,
                    starttime: starttime,
                    endtime: endtime
                },
                text: {
                    none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                },
                height: 450,
                even: true,
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                page: true,
                parseData: function(res){ 
                    return {
                        "code": res.retcode, 
                        "msg": res.retmsg, 
                        "count": res.data.taskAmount, 
                        "data": res.data.sumTask 
                    };
                },
                cols: [[
                    { type: 'numbers', title: '序号', align: 'center' },
                    { field: 'state', title: '状态', align: 'center', width: 100, templet: '#state' },
                    { field: 'tasktypename', title: '任务类型', align: 'center', width: 100 },
                    { field: 'taskname', title: '任务名称',
                        templet: function(d){
                            return '<span lay-tips="'+d.taskname+'">'+d.taskname+'</span>'
                        }
                    },
                    { field: 'starttime', title: '任务开始时间', align: 'center' },
                    { field: 'endtime', title: '任务结束时间', align: 'center' },
                    { field: 'remaintime', title: '距结束还有', align: 'center' },
                    { field: 'deptname', title: '任务发布单位', align: 'center' },
                    { field: 'username', title: '发布人', align: 'center' }
                ]]
            });
        }

        //加载任务状态下拉框
        function initState(){
            var states = [
                { state: '00', statename: '创建中' },
                { state: '20', statename: '退回修改' },
                { state: '25', statename: '审批中' },
                { state: '30', statename: '审批通过' },
                { state: '40', statename: '填报中' },
                { state: '90', statename: '已结束' },
                { state: '99', statename: '已关闭' }
            ], html = '<option value=""></option>';
            layui.each(states, function(index, item){
                html += '<option value="'+item.state+'">'+item.statename+'</option>';
            });
            $('#criteria-state-select').html(html);
            form.render('select', 'query-criteria-filter');
        }

        //加载开始、结束时间选择
        function initLaydate(){
            var commonMin = { year: 1900, month: 0, date: 1},
				commonMax = { year: 2099, month: 11, date: 31};
            var startDate = laydate.render({
                elem: '.layui-input-startDate',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm',
                done: function (value, date) {
                    if(!!value) {
                        endDate.config.min = {
                            year:date.year,
                            month:date.month-1, 
                            date: date.date,
                        };
                    }else {
                        endDate.config.min = commonMin;
                        endDate.config.max = commonMax;
                    }
                }
            });
            var endDate = laydate.render({
                elem: '.layui-input-endDate',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm',
                done: function (value, date) {
                    if(!!value) {
                        startDate.config.max = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date,
                        } 
                    }else {
                        startDate.config.min = commonMin;
                        startDate.config.max = commonMax; 
                    }
                }
            });
        }

        //点击事件
        $('.query-criteria').delegate('.K-btn', 'click', function(){
            var target = $(this).data('target');
            switch(target){
                case 'reset':
                    form.val("query-criteria-filter", {
                        "taskname": "", 
                        "state": "", 
                        "starttime": "", 
                        "endtime": ""
                    });
                    initCriTable();
                    break;
                default:
                    break;
            }
        })

        //监听查询
        form.on('submit(formQuery)', function(data){
            var field = data.field;
            initCriTable(field.taskname, field.state, field.starttime, field.endtime);
        });

        //监听行点击事件
        table.on('row(criteria-table-filter)', function(obj){
            var temUrl = obj.data.connection ? '/'+obj.data.connection : '';
            location.hash = temUrl;
            layer.close(index);
        });
    });
}
</script>
